<template>
  <div>
    <headerMiddle title="我的收藏" />
    <post :post="item" v-for="(item,index) in collectionList" :key="index" />
  </div>
</template>

<script>
import headerMiddle from "../components/headerMiddle";
import post from "../components/post";
export default {
  components: {
    headerMiddle,
    post
  },
  data() {
    return {
      collectionList: []
    };
  },
  mounted() {
    // 在页面加载完毕就获取数据并复制到data 当中
    this.$axios({
      url: "/user_star",
      method: "get"
    }).then(res => {
      console.log(res.data);
      // 获取完了数据,我们的收藏是在 res.data.data里面
      this.collectionList = res.data.data;
      // 遍历每一个收藏,如果收藏里面有图片在遍历图片逐个处理
      this.collectionList.forEach(element => {
        if (element.cover) {
          element.cover.forEach(element => {
            // 如果图片带上http 就知道是张图片,无需拼接,如果没有就需要拼接
            if (element.url.indexOf("http") < 0) {
              // 如果没有就拼接
              element.url = this.$axios.defaults.baseURL + element.url;
            }
          });
        }
      });
    });
  }
};
</script>

<style lang="less" scoped>
.item {
  padding: 20px;
  border-bottom: 1px solid #eee;
}
.cover {
  display: flex;
  margin-top: 2.778vw;
}
.imgwrapper {
  width: 33%;
  height: 22.222vw;
  overflow: hidden;
  img {
    width: 100%;
    height: auto;
    padding: 0.833vw;
  }
}
.info {
  margin-top: 2.778vw;
  color: #888;
  font-size: 14px;
}
</style>